/**
 * @file 给element ui table组件增加过滤显示列
 * @author fanxingguang@baidu.com
 * 2017-03-16
 */
import Vue from 'vue';
import filterTableField from './filter-table-field.vue';

/**
 * 指令被添加增加响应
 *
 * @param  {Object} el      [指令所绑定的dom]
 * @param  {Object} binding [一个对象，包含以下属性]
 * @param  {Object} vnode   [虚拟节点]
 */
let handleInserted = function (el, binding, vnode) {
    // 当前table实例
    let ivue = vnode.componentInstance;
    // 存放所有的filed
    let allFields = [];
    // 保存所有slot，需要深复制一份，否则会出问题
    let allTableSlots = $.extend(true, [], ivue.$slots.default);
    allTableSlots.forEach((item, index) => {
        let options = item.componentOptions;
        if (options && options.propsData) {
            let propsData = options.propsData;
            allFields.push(propsData);
        }
    });

    /**
     * 弹出一个窗口,绑定到添加的按钮上
     */
    let openFieldsDialog = () => {
        // 弹出框的content部分，自定一个vue实例，处理用户的checkbox选择
        let filterTableDialog;
        // 弹出alert框
        ivue.$msgbox({
            title: '选择显示的列',
            message: ' ',
            closeOnClickModal: false,
            customClass: 'filter-table-dialog',
            // 关闭之前，需要清除实例，并删除dom
            beforeClose(action, instance, done) {
                // 强迫症，等msgbox关闭完了，再删除dom，要不然msgbox会闪一下
                setTimeout(() => {
                    filterTableDialog.$destroy();
                    let wrap = document.querySelector('.filter-table-dialog .table-fields-wrap');
                    wrap.parentNode.removeChild(wrap);
                }, 300);
                done();
            }
        });
        Vue.nextTick(() => {
            let dialogContent = document.querySelector('.filter-table-dialog .el-message-box__content');
            let dialogMainNode = document.createElement('div');
            dialogContent.append(dialogMainNode);
            filterTableDialog = new Vue({
                el: dialogMainNode,
                render: h => h(
                    filterTableField, {
                        props: {
                            fields: allFields
                        }
                    }
                )
            });
            filterTableDialog.$children[0].$on('showFieldsChanged', fields => {
                let result = [];
                allTableSlots.forEach(item => {
                    let options = item.componentOptions;
                    if (options && options.propsData) {
                        if (fields.indexOf(options.propsData.prop) > -1) {
                            result.push(item);
                        }
                    }
                    else {
                        result.push(item);
                    }
                });
                ivue.$slots.default = result;
                ivue.$forceUpdate();
            });
        });
    };
    let btn = document.createElement('i');
    btn.className = 'filter-field el-icon-setting';
    // 使用jquery方式绑定事件，防止兼容性问题
    $(btn).on('click', event => {
        event.preventDefault();
        event.stopPropagation();
        openFieldsDialog();
    });
    vnode.elm.append(btn);
};

export default function addFilterfieldDirective(Vue) {
    Vue.directive('filterfield', {
        inserted: handleInserted
    });
}
